<template>
    <div class="problemTypes">
        <el-tag type="paimary" round="true" v-for="(item, index) in problemTypes" :key="index">
            {{ item }}
        </el-tag>
    </div>

    <div class="problemList">
        <div class="choose">
            <el-select class="problemListChoose" v-model="choose.listValue" placeholder="题单" clearable=true>
                <el-option v-for="item in problemListOptions" :key="item.listValue" :value="item.listValue" />
            </el-select>

            <el-select class="difficulty" v-model="choose.difficultyValue" placeholder="难度" clearable="true">
                <el-option v-for="item in problemDifficulty" :key="item.difficultyValue"
                    :value="item.difficultyValue" />
            </el-select>

            <el-select class="status" v-model="choose.statusValue" placeholder="状态" clearable="true">
                <el-option v-for="item in problemStatus" :key="item.statusValue" :value="item.statusValue" />
            </el-select>

            <el-input v-model="input" style="width: 200px" placeholder="搜索题目、编号或内容" :prefix-icon="Search" />

        </div>

        <div class="table">
            <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="status" label="状态" flex="1">
                    <template #default="scope">
                        <el-icon v-show="false">
                            <CircleCheck />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="problem" label="题目" flex="1" />
                <el-table-column prop="solution" label="题解" flex="1" />
                <el-table-column prop="passRate" label="通过率" flex="1" />
                <el-table-column prop="difficulty" label="难度" flex="1" />
            </el-table>
        </div>
    </div>

</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import {reactive} from 'vue'
import axios from '../../api/index';

const problemTypes = reactive([
    '全部题目',
    '算法',
    '数据库',
    'Shell',
    '多线程',
    'JavaScript',
    'panda'
])

const choose = reactive({
    listValue: '',
    difficultyValue: '',
    statusValue: ''
})

const problemListOptions = [
    {
        listValue: '字符串练习'
    },
    {
        listValue: '数组练习'
    }
]

const problemDifficulty = [
    {
        difficultyValue: '简单'
    },
    {
        difficultyValue: '中等'
    },
    {
        difficultyValue: '困难'
    }
]

const problemStatus = [
    {
        statusValue: '未开始'
    },
    {
        statusValue: '已解答'
    },
    {
        statusValue: '尝试过'
    }
]

// const tableData = [
//     {
//         problem: '1. 两数之和',
//         solution: '25720',
//         passRate: '80.0%',
//         difficulty: '简单'

//     }
// ]

const getTableDate = async () => {
    const res = await axios.post('/api/question/list/page')
    console.log(res);
}

getTableDate()
</script>

<style lang="css">
.problemTypes {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.el-tag {
    flex: 0 0 auto
}

.problemList {
    .choose {
        display: flex;
        margin: 1rem;
        justify-content: center;

        .el-select {
            width: 10rem;
        }
    }

    .table {
        display: flex;
        justify-content: space-between;
        margin: 4rem;
    }
}
</style>